<template>
	<u-popup mode="bottom" :show="showChoose" @close="closePopup" :customStyle="{height: '200px'}">
		<view class="header">
			<view class="cancel-btn">
				<text @click="closePopup">取消</text>
			</view>
			<view class="header-title">选择角色</view>
			<view class="confrim-btn">
				<text @click="confrimPopup">确定</text>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<template v-if="single">
					<u-radio-group
						v-if="roleList.length > 0"
						v-model="radioValue"
						placement="column"
					>
						<u-radio
							:customStyle="{marginBottom: '8px'}"
							v-for="(v, i) in roleList[0].children"
							v-if="v.fullName != '管理员' && v.fullName != '游客'"
							:key="i"
							:label="v.fullName"
							:name="JSON.stringify(v)"
						>
						</u-radio>
					</u-radio-group>
				</template>
				<template v-else>
					<view v-for="(item, index) in roleList">
						<view>{{ item.fullName }}</view>
						<u-checkbox-group
							v-model="checkboxValue[index]"
							placement="column"
						>
							<u-checkbox
								:customStyle="{marginBottom: '8px'}"
								v-for="(v, i) in item.children"
								:key="i"
								:label="v.fullName"
								:name="JSON.stringify(v)"
							>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</template>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import {
		getRoleByOrganize
	} from '@/api/role.js';
	export default {
		props: {
			single: {
				type: Boolean,
				default: true
			},
			showChoose: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				roleList: [],
				checkboxValue: [],
				radioValue: ''
			}
		},
		created() {
			// 加载角色
			getRoleByOrganize().then(res => {
				res.data.list.forEach(item => {
					// 增加存储的值
					this.checkboxValue.push([]);
				})
				this.roleList = res.data.list;
			});
		},
		methods: {
			closePopup() {
				this.$emit("update:show-choose", false);
			},
			confrimPopup() {
				// 便利所有的数据
				const chooseRole = []
				if (this.single) {
					if (this.radioValue) {
						chooseRole.push(JSON.parse(this.radioValue));
					}
				} else {
					this.checkboxValue.forEach(item => {
						item.forEach(v => {
							chooseRole.push(JSON.parse(v));
						})
					});
				}
				// 给表单复制
				this.$emit("confirm", chooseRole);
			}
		}
	}
</script>

<style scoped>
	.header {
		display: flex;
		line-height: 45px;
		text-align: center;
		border-bottom: 1px solid #efefef;
	}
	.cancel-btn {
		color: #909399;
	}
	.confrim-btn {
		color: #3c9cff;
	}
	.cancel-btn, .confrim-btn {
		width: 60px;
	}
	.header-title {
		flex: 1;
		color: #323233;
	}
	.content {
		padding: 24rpx;
		text-align: center;
	}
</style>
